<template>
    <!-- 房屋档案 -->
    <div class="archives">
        <!-- 标题 -->
        <div class="archives-title">
            <span>房屋管理>房屋档案</span>
        </div>
        <!-- 社区 -->
        <div class="community">
            <!-- 社区图标 -->
            <div class="community-icon">
                <i class="iconfont icon-36school" style="font-size:30px;color: aquamarine;"></i>
            </div>
            <!-- 社区平台 -->
            <div class="community-name">
                <span>智慧平台Ⅰ</span>
            </div>
            <!-- 社区地址 -->
            <div class="community-address">
                XX省XX市XX区XX路XX号
            </div>
        </div>
        <!-- 区域管理 -->
        <div class="regional-management">
            <!-- 区域 -->
            <div class="regional-management-left">
                <div class="regional-management-left-item" v-for="item in state.propertyArea" :key="item" @click="changeArea(item)">
                    <i class="iconfont icon-jiufuqianbaoicon06" style="color:#0A92FA ;font-weight: 700;"></i>
                    <span style="color: #838380;margin-left: 14px;">{{ item }}</span>
                </div>
            </div>
            <!-- 该区域具体数据 -->
            <div class="regional-management-right">
                <!-- 区域名字 -->
                <div class="regional-management-right-title" style="color:#929090;">
                    {{ state.propertyArea[state.selectAreaId - 1]}}楼栋:
                </div>
                <div class="regional-management-right-box">
                    <div class="regional-management-right-item" v-for="item in state.areaBuilding" :key="item.buildingId">
                        <div class="regional-management-right-item-title">
                            {{ item.buildingName }}
                        </div>
                        <div class="regional-management-right-item-data">
                            <div>
                                楼栋编号:{{ item.propertyId }}
                            </div>
                            <div>
                                楼层:{{ item.floorNum }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { onMounted, reactive } from 'vue';
import getApi from '@/api/getApi';

export default {
    setup() {
        const state = reactive({
            propertyArea: [],
            selectAreaId: 1,
            areaBuilding:[
                {
                    id:1,
                    name:'全部楼栋',
                    dataLeftName:'楼栋',
                    dataLeft:7,
                    dataRightName:'住户',
                    dataRight:68
                },
                {
                    id:2,
                    name:'公共区域',
                    dataLeftName:'单元数',
                    dataLeft:1,
                    dataRightName:'楼层',
                    dataRight:3
                },
                {
                    id:3,
                    name:'研一',
                    dataLeftName:'单元数',
                    dataLeft:2,
                    dataRightName:'楼层',
                    dataRight:13
                },
                {
                    id:4,
                    name:'研二',
                    dataLeftName:'单元数',
                    dataLeft:2,
                    dataRightName:'楼层',
                    dataRight:13
                },
                {
                    id:5,
                    name:'研三',
                    dataLeftName:'单元数',
                    dataLeft:2,
                    dataRightName:'楼层',
                    dataRight:13
                }
            ]
        })
        onMounted(()=>{
            getbuildInfo()
        })
        // 读取cookie缓存token
        const getCookie = (cname) => {   // 参数为存储名
            var name = cname + "=";
            var ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i].trim();
                if (c.indexOf(name) == 0) return decodeURIComponent(c.substring(name.length, c.length));
            }
            return "";
        };
        // 获取物业区域信息
        const getbuildInfo = () =>{
            getApi('/buildinghead/selectallregionbyproject','get',{projectId:1},{Authorization: getCookie('token')}).then((res)=>{
                // console.log(res)
                state.propertyArea = res.data.data
                changeArea(state.propertyArea[0])
            })
        }
        // 点击切换区域（如管理区域从北区一期变成南区二期）
        const changeArea = (data) =>{
            // console.log(data)
            getApi('/buildinghead/selectBuildingByRegion','get',{region:data},{Authorization: getCookie('token')}).then((res)=>{
                // console.log(res)
                console.log(res.data.data)
                let arr = res.data.data;
                state.areaBuilding = arr
                // for(let i=0;i<res.data.data.length;i++){
                //     let obj = {}
                //     obj.id = res.data.data[i].buildingId
                //     obj.name = res.data.data[i].
                // }
                // state.propertyArea = res.data.data
            })
        }

        return { state,changeArea }
    }
}
</script>

<style lang="less" scoped>
.archives {
    margin-top: 10px;
    width: 100%;
    height: calc(100% - 10px);
    background: #ffffff;
    padding: 20px 20px 20px 20px;
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: scroll;

    .archives-title {
        color: #9C9E9C;
    }

    .community {
        margin-top: 20px;
        display: flex;
        align-items: center;
        font-size: 13px;

        .community-name {
            margin-left: 30px;
            color: #616261;
        }

        .community-address {
            margin-left: 30px;
            color: #616261;
        }
    }

    .regional-management {
        width: 100%;
        display: flex;

        .regional-management-left {
            width: 200px;
            margin-top: 30px;

            .regional-management-left-item {
                margin-bottom: 16px;
                cursor: pointer;
            }
        }

        .regional-management-right {
            margin-top: 30px;
            width: calc(100% - 200px);

            .regional-management-right-box {
                margin-top: 10px;
                display: flex;
                flex-wrap: wrap;
                .regional-management-right-item {
                    margin-top: 20px;
                    width: 200px;
                    height: 100px;
                    border-radius: 8px;
                    background-color: #E6F4FE;
                    color: #A1D5FC;
                    padding: 20px 10px 20px 10px;
                    box-sizing: border-box;
                    margin-right: 30px;
                    cursor: pointer;
                    .regional-management-right-item-data{
                        margin-top: 20px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                    }
                }
            }

        }
    }
}
</style>